<script setup lang="ts">
import { ref, onBeforeMount, onBeforeUnmount } from 'vue';
import dayjs from 'dayjs';

const time = ref<string>('');
let timer: number | null = null;

onBeforeMount(() => {
  timer = setInterval(() => {
    time.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
  }, 1000);
});
onBeforeUnmount(() => {
  clearInterval(timer!);
});
</script>

<template>
  <div class="row top full-height">
    <div class="col left">
      <div class="btn flex flex-center" @click="$router.push('/')">首页</div>
    </div>
    <div class="center flex flex-center relative-position">
      智慧旅游可视化大数据展示平台
      <div class="title absolute-center flex flex-center">平台直播数据流动</div>
    </div>
    <div class="col right flex justify-between">
      <div class="btn flex flex-center">统计报告</div>
      <div class="time flex flex-center">当前时间: {{ time }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.top {
  color: #29fcff;
  .btn {
    width: 135px;
    height: 42px;
    background-size: cover;
    font-size: 20px;
  }
  .left {
    height: 36px;
    background: url(../images/dataScreen-header-left-bg.png) no-repeat;
    background-size: cover;
    .btn {
      float: right;
      background: url(../images/dataScreen-header-btn-bg-l.png) no-repeat;
    }
  }
  .center {
    width: 793px;
    height: 74px;
    font-size: 30px;
    background: url(../images/dataScreen-header-center-bg.png) no-repeat;
    background-size: cover;
    .title {
      top: 90px;
      width: 626px;
      height: 44px;
      font-size: 18px;
      background: url(../images/dataScreen-header-warn-bg.png);
    }
  }
  .right {
    height: 36px;
    background: url(../images/dataScreen-header-right-bg.png) no-repeat;
    background-size: cover;
    .btn {
      background: url(../images/dataScreen-header-btn-bg-r.png) no-repeat;
    }
    .time {
      font-size: 20px;
    }
  }
}
</style>
